<template>
    <div class="collect">
      
      <!-- 顶部导航 -->
      <van-nav-bar
        title="我的收藏"
        left-text="返回"
        right-text="..."
        left-arrow
        @click-left="$router.go(-1)"
      />
      <!-- 收藏列表 -->
      <div class="shoplist">
        <!-- <div @click="toDetail(item)" class="shop" v-for="(item,index) in $store.state.collectlist" :key="index"> -->
        <div @click="toDetail(item)" class="shop" v-for="(item,index) in collectlist" :key="index">
          <div class="imgbox">
            <img :src="item.picUrl" alt="">
          </div>
          <div class="text">
            <div class="name">{{item.name}}</div>
            <div class="sale"> ☆ {{item.wmPoiScore}} {{item.monthSalesTip}}</div>
            <div class="desc">{{item.minPriceTip}} {{item.shippingFeeTip}}</div>
          </div>
        </div>
        <!-- <div v-if="$store.state.collectlist.length == 0" class="empty"> -->
        <div v-if="collectlist.length == 0" class="empty">
          未收藏任何店铺,<span @click="$router.push('/index/home')">去逛逛</span>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  //导入vuex中的工具函数(辅助函数) , 使用该工具函数 简化vuex在组件中的应用
  import { mapState } from 'vuex'
  
  export default {
      computed:{
          //mapState()这个工具函数 会将vuex中的数据 映射到组件的computed中.
          ...mapState(['collectlist'])
      },
      methods:{
          toDetail(item){ //跳转到详情页
              this.$router.push('/detail/'+item.mtWmPoiId);
          }
      }
  }
  </script>
  
  <style lang='scss' scoped>
  .shoplist{
    margin: 10px;
    .shop{
      display: flex;
      margin: 10px 0;
      .imgbox{
        width: 80px;
        margin-right: 10px;
        img{
          width: 100%;
        }
      }
      .text{
        font-size: 12px;
      }
    }
  
    .empty{
      text-align: center;
      padding: 50px 0;
      span{
          color: red;
      }
    }
  }
  </style>